<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      routes: [],
    }
  },
  computed: {
    active() {
      return this.routes.findIndex((e) => e.name === this.$route.name)
    },
  },
  watch: {},
  created() {
    this.routes = this.$router.options.routes.find((e) => e.path === '/index').children
  },
  mounted() {},
  methods: {},
}
</script>

<template>
  <div>
    <keep-alive>
      <router-view />
    </keep-alive>
    <van-tabbar :value="active" fixed>
      <van-tabbar-item
        v-for="(item, index) of routes"
        :key="index"
        replace
        :to="{ name: item.name }"
        :icon="item.meta.icon"
      >
        {{ item.meta.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="less" scoped></style>
